<template>
  <div class="user" v-if="OK">
    <div class="content-wrapper">
      <van-nav-bar
        :fixed="true"
        :safe-area-inset-top="true"
        :placeholder="true"
        :title="userinfo.username"
        left-arrow
        @click-left="routerBack"
      />
      <div class="info-cart">
        <div class="content-wrapper">
          <div class="head">
            <div class="head-img">
              <img round :src="userinfo.headImg" />
            </div>
            <div v-if="!isMe">
              <div class="hasfocused" @click="doUnFocus" v-if="isfocusd">
                已关注
              </div>
              <div class="focus" @click="doFocus" v-else>+ 关注</div>
            </div>
          </div>
          <div class="mid">
            <div class="username">
              {{ userinfo.username }}
            </div>
            <div class="userDescriptions">
              {{ userinfo.userDescriptions }}
            </div>
          </div>
          <div class="buttom">
            <div class="follower">
              <span class="num">{{ pageData.follwerLength }}</span> 关注
            </div>
            <div class="fans">
              <span class="num">{{ pageData.fansLength }}</span> 粉丝
            </div>
          </div>
        </div>
      </div>
      <div class="tap-wrapper">
        <van-tabs v-model:active="active" shrink>
          <van-tab title="游记">
            <Note-Cart
              v-for="item in notes"
              :key="item._id"
              :note="item"
              @click="routerTo(`/note/detail/${item._id}`)"
            />
          </van-tab>
          <van-tab :title="'点赞'">
            <Note-Cart
              v-for="item in likeNotes"
              :key="item._id"
              :note="item"
              @click="routerTo(`/note/detail/${item._id}`)"
            />
          </van-tab>
          <van-tab :title="'点评'"> </van-tab>
          <van-tab :title="'经验'"> </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useRoute, useRouter } from 'vue-router';
import { getUserInfoById, getAllNoteByUserId } from '@/api/interface.js';
import { cancelFollower, addFollower } from '@/api/interface.js';
import { Toast, Dialog } from 'vant';
import NoteCart from '../My/components/NoteCart.vue';
import { useStore } from 'vuex';
export default {
  components: { NoteCart },
  setup() {
    const router = useRouter();
    const store = useStore();
    const route = useRoute();
    const state = reactive({
      userinfo: {},
      notes: [],
      likeNotes: [],
      isfocusd: false,
      isMe: true,
      active: null,
      pageData: {
        fansLength: 0,
        follwerLength: 0,
      },
      OK:false
    });

    const routerTo = (url) => {
      router.push({
        path: url,
      });
    };
    const isIndexOf = (arr, item) => {
      if (!arr) {
        return;
      }
      if (arr.indexOf(item) !== -1) {
        // 已经关注了
        return true;
      }
      return false;
    };
    const routerBack = () => {
      router.go(-1);
    };
    const doFocus = async () => {
      Toast('关注成功！');
      await addFollower({ followerId: state.userinfo._id })
        .then((res) => {
          if (res.status == '200') {
            state.isfocusd = true;
          }
        })
        .catch((err) => {
          console.log('点赞的时候出错啦', err);
        });
    };
    const doUnFocus = async () => {
      Dialog.confirm({
        title: '提示',
        message: '你确定要取关这个小可爱嘛？',
      })
        .then(async () => {
          // on confirm
          await cancelFollower({ followerId: state.userinfo._id })
            .then((res) => {
              if (res.status == '200') {
                state.isfocusd = false;
              }
            })
            .catch((err) => {
              console.log('点赞的时候出错啦', err);
            });
        })
        .catch(() => {
          // on cancel
        });
    };
    onBeforeMount(async () => {
      await store.dispatch('_getUserInfo');
      await getUserInfoById({
        id: route.params.id,
      })
        .then((res) => {
          console.log(res)  ;
          state.OK = true
          state.userinfo = res.data;
        })
        .catch((err) => {
          console.log('在根据用户id获取用户信息出错', err);
        });
      state.pageData.fansLength = state.userinfo.fans.length;
      state.pageData.follwerLength = state.userinfo.followers.length;
      await getAllNoteByUserId({ id: route.params.id })
        .then((res) => {
          state.notes = res.data;
        })
        .catch((err) => {
          console.log('根据id拿用户所有note时出错', err);
        });
      if (route.params.id == store.state.userinfo._id) {
        state.isMe = true;
      } else {
        state.isMe = false;
        state.isfocusd = isIndexOf(
          state.userinfo.fans,
          store.state.userinfo._id
        );
      }
      state.likeNotes = state.userinfo.likeNotes;
      console.log(state.userinfo);
    });
    return { ...toRefs(state), routerTo, routerBack, doFocus, doUnFocus };
  },
};
</script>
<style lang="less" scoped>


::v-deep(.van-tabs__line){
  background: black;
}
.user {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.info-cart {
  margin-top: 100px;
  border-radius: 8px;
  background: rgb(223, 218, 218);
  .content-wrapper {
    position: relative;
    top: -25px;
    padding: 0 10px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .head-img {
        img {
          border: 3px solid rgb(233, 221, 221);
          border-radius: 50px;
          display: block;
          width: 50px;
          height: 50px;
        }
      }
      .focus {
        background: rgb(77, 197, 185);
        border-radius: 20px;
        box-sizing: border-box;
        padding: 4px 18px;
        font-size: 13px;
        color: #fff;
        font-family: '黑体';
      }
      .hasfocused {
        background: rgb(175, 176, 176);
        border-radius: 20px;
        box-sizing: border-box;
        padding: 4px 18px;
        font-size: 13px;
        color: rgb(56, 55, 55);
        font-family: '黑体';
      }
    }
    .mid {
      padding: 10px 0;
      .username {
        font-size: 17px;
        font-weight: 610;
        font-family: '黑体';
      }
      .userDescriptions {
        box-sizing: border-box;
        padding-top: 15px;
        font-size: 15px;
        font-family: '华文楷体';
        color: rgb(100, 99, 99);
      }
    }
    .num {
      font-size: 20px;
      font-family: '黑体';
      color: #000;
    }
    .buttom {
      display: flex;
      margin-top: 10px;
      .follower {
        color: rgb(104, 102, 102);
        font-size: 10px;
      }
      .fans {
        margin-left: 10px;
        color: rgb(104, 102, 102);
        font-size: 10px;
      }
    }
  }
}

.content-wrapper {
  width: 96%;
  margin: 0 auto;
}
.tap-wrapper {
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.van-tabs__nav {
  background: red;
}
</style>
